<template>
  <div style="position:relative;width: 100%;height: 100%;user-select: none;cursor: pointer;">

    <!-- 箭头 -->
     <!-- 左 -->
    <div style="position: absolute;left: 10px;top: 50%;transform: translate(0,-50%);z-index: 59;">
        <div style="display: flex;align-items: center;justify-content: center;width:40px;height: 40px;">
            <img style="width:100%;height:100%;transform: rotate(-90deg);" @click="turnLeft" src="@/assets/img/arrow-pic.png"/>

        </div>
    </div>
    <!-- 右 -->
    <div style="position: absolute;right: 10px;top: 50%;transform: translate(0,-50%);z-index: 59;" >
        <div style="display: flex;align-items: center;justify-content: center;width:40px;height: 40px;" @click="turnRight">
            <img style="width:100%;height:100%;transform: rotate(90deg);" src="@/assets/img/arrow-pic.png"/>

        </div>
    </div>
    <!-- 上 -->
    <div style="position: absolute;top: 10px;left: 50%;transform: translate(-50%,0);z-index: 59;" v-if="wallIndex!=4">
        <div style="display: flex;align-items: center;justify-content: center;width:40px;height: 40px;" >
            <img style="width:100%;height:100%;transform: rotate(0deg);" @click="turnTop" src="@/assets/img/arrow-pic.png"/>

        </div>
    </div>
    <!-- 下 -->
    <div style="position: absolute;bottom: 10px;left: 50%;transform: translate(-50%,0);z-index: 59;" v-if="wallIndex==4">
        <div style="display: flex;align-items: center;justify-content: center;width:40px;height: 40px;" >
            <img style="width:100%;height:100%;transform: rotate(180deg);" @click="turnDown" src="@/assets/img/arrow-pic.png"/>
        </div>
    </div>

    <!-- 物品栏 -->
    <div class="things-box" style="position: absolute;left: 0;padding:5px 1%;height: 120px;width: 98%;background-color: #b95002;z-index: 50;">
        <!-- 物品栏 标题 -->
        <div style="height:10px;width: 100%;font-size: 12px;">物品栏</div>
        <!-- 物品 内容 -->
         <div style="display: flex;align-items: center;margin-top:5px;height:105px;width: 100%;">
            <!-- 通关钥匙 -->
            <div v-if="thingsList.outKey.owing" class="things-item flexajc" style="position:relative;margin-right:10px;width: 100px;height: 100px;border: 4px solid #8f4712;border-radius: 10px 20px;">
                <div style="position: absolute;right: 5px;top:5px;">
                    钥匙
                </div>
                <img src="@/assets/img/tip/key2.png" style="width:80%;height: 80%;" />
            </div>
            <!-- 钥匙1 -->
            <div v-if="thingsList.bag.owing" class="things-item flexajc" style="position:relative;margin-right:10px;width: 100px;height: 100px;border: 4px solid #8f4712;border-radius: 10px 20px;">
                <div style="position: absolute;right: 5px;top:5px;">
                    钥匙
                </div>
                <img src="@/assets/img/tip/key3.png" style="width:80%;height: 80%;" />
            </div>
            <!-- 纸条 -->
            <div @click.stop="showPaperText" v-if="thingsList.clothes.owing" class="things-item flexajc" style="position:relative;margin-right:10px;width: 100px;height: 100px;border: 4px solid #8f4712;border-radius: 10px 20px;">
                <div style="position: absolute;right: 5px;top:5px;">
                    纸条
                </div>
                <img src="@/assets/img/tip/zhituan.png" style="width:80%;height: 80%;" />
            </div>


            <div class="things-item flexajc" style="position:relative;margin-right:10px;width: 100px;height: 100px;border: 4px solid #8f4712;border-radius: 10px 20px;">

            </div>
         </div>
     </div>

    <!-- 正面 -->
    <div style="position: relative;width: 100%;height: 100%;" v-if="wallIndex==0">
        <img style="width: 100%;height:100%;" src="@/assets/img/front-wall-img.png" />

        <!-- 门 -->
        <div @click="lockedDoorClick" style="position: absolute;right: 240px;top:90px;width: 160px;height: 350px;">

        </div>
        <!-- 门锁 -->
         <div @click.stop="lockedDoorKeyClick" style="position: absolute;right: 355px;top:230px;width: 40px;height: 40px;">

         </div>

         <!-- 斜挎包 -->
          <div @click="bagClick" style="position: absolute;right: 500px;top:290px;width: 80px;height: 50px;">

          </div>

          <!-- 衣物 -->
           <div @click="clothesClick" style="position: absolute;right: 438px;top:190px;width: 64px;height: 200px;">

           </div>

           <!-- 电灯开关 -->
            <div @click="lightOpenClick" style="position: absolute;right: 170px;top:200px;width: 20px;height: 30px;">
                <img src="@/assets/img/lignt-open-pic.png" style="width: 100%;height: 100%;" alt="">
            </div>

            <!-- 鞋柜 -->
             <div @click="shoeCabinetClick" style="position: absolute;right: 920px;top:260px;height: 200px;width:120px;">

             </div>
    </div>

    <!-- 右面 -->
    <div style="position: relative;width: 100%;height: 100%;" v-if="wallIndex==1">
        <img style="width: 100%;height:100%;" src="@/assets/img/right-wall-img.png" />
    </div>

    <!-- 后面 -->
    <div style="position: relative;width: 100%;height: 100%;" v-if="wallIndex==2">
        <img style="width: 100%;height:100%;" src="@/assets/img/back-wall-img.png" />

        <!-- 电箱 -->
         <div @click="elecBoxClick" style="position: absolute;right: 200px;top:100px;width: 80px;height: 80px;">
            <img src="@/assets/img/elec-box-pic.png" style="width: 100%;height: 100%;" alt="">
         </div>

         <!-- 地板 -->
          <div style="position: absolute;right: 150px;top:450px;width: 80px;height: 80px;transform: rotate(90deg);">
            <img src="@/assets/img/floor-pic.png" style="width: 100%;height: 100%;" />
          </div>
    </div>
    
    <!-- 左面 -->
    <div style="position: relative;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;" v-if="wallIndex==3">
        <img style="width: 100%;height:100%;" src="@/assets/img/left-wall-img.png" />

        <!-- 电子钟 -->
        <div @click="clockClick" class="" style="position: absolute;top: 305px;left: 360px;width: 80px;height: 50px;">
            <img src="@/assets/img/clock-pic.png" style="width: 100%;height: 100%;"/>
        </div>

    </div>

    <!-- 上面 -->
    <div style="position: relative;width: 100%;height: 100%;" v-if="wallIndex==4">
        <img style="width: 100%;height:100%;" src="@/assets/img/top-wall-img.png" />
    </div>

    <!-- 提示 -->
    <div v-if="tipShow" style="padding:10px 25px;display: flex;align-items: center;justify-content: center;position: absolute;top: 50px;left: 50%;transform: translate(-50%,0);background-color: #f26f0c;border: 4px solid #b85002;border-radius: 10px;color: #ffffff;">
        {{tipMsg}}
    </div>

    <!-- 显示提示 -->
    <div v-if="textShow" style="display: flex;align-items: center;justify-content: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: #f26f0c;border: 4px solid #b85002;border-radius: 10px;color: #ffffff;">
        <div style="display: flex;align-items: center;justify-content: center;padding:20px;width:100px;height: 50px;position: relative;border-radius: 5px;">
            <div @click.stop="textCloseFun" class="text-close-btn" style="display: flex;align-items: center;justify-content: center;position: absolute;right: -10px;top: -15px;padding:5px 10px;background-color: #8c3d02;border-radius: 5px;border:1px solid rgb(160, 160, 160);">
                ×
            </div>
            {{textMsg}}

        </div>
    </div>

    <div @click="bigScreenShow = 0" v-if="bigScreenShow" style="position: absolute;left: 0;top:0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.8);z-index:99;">
        <!-- 闹钟 -->
        <div v-if="bigScreenShow == 1" style="padding:1%;width:98%;height:96%;">
            <div style="display: flex;align-items: center;width:100%;height: 100%;">
                <!-- 时间 -->
                <div @click.stop="" style="display: flex;align-items: center;margin-left:5%;width: 40%;height: 80%;">
                    <div style="flex:1;height: 100%;">
                        <div class="flexajc" style="height:10%;background-color: rgb(100,100,100);font-size: 40px;" @click.stop="addHour1Click">+</div>
                        <div class="flexajc" style="height:80%;background-color: rgb(160,160,160);font-size: 40px;">{{ elecTime.hour1 }}</div>
                        <div class="flexajc" style="height:10%;background-color: rgb(100,100,100);font-size: 40px;" @click.stop="lessHour1Click">-</div>
                    </div>
                    <div style="flex:1;height: 100%;">
                        <div class="flexajc" style="height:10%;background-color: rgb(100,100,100);font-size: 40px;" @click.stop="addHour2Click">+</div>
                        <div class="flexajc" style="height:80%;background-color: rgb(160,160,160);font-size: 40px;">{{ elecTime.hour2 }}</div>
                        <div class="flexajc" style="height:10%;background-color: rgb(100,100,100);font-size: 40px;" @click.stop="lessHour2Click">-</div>
                    </div>
                </div>
                <div style="display: flex;align-items: center;justify-content: center;width: 10%;height: 100%;color: #fff;font-size: 40px;">
                    :
                </div>
                <div @click.stop="" style="display: flex;align-items: center;margin-right:5%;width: 40%;height: 80%;">
                    <div style="flex:1;height: 100%;">
                        <div class="flexajc" style="height:10%;background-color: rgb(100,100,100);font-size: 40px;"  @click.stop="minute1Click(1)">+</div>
                        <div class="flexajc" style="height:80%;background-color: rgb(160,160,160);font-size: 40px;">{{ elecTime.minute1 }}</div>
                        <div class="flexajc" style="height:10%;background-color: rgb(100,100,100);font-size: 40px;"  @click.stop="minute1Click(-1)">-</div>
                    </div>
                    <div style="flex:1;height: 100%;">
                        <div class="flexajc" style="height:10%;background-color: rgb(100,100,100);font-size: 40px;" @click.stop="minute2Click(1)">+</div>
                        <div class="flexajc" style="height:80%;background-color: rgb(160,160,160);font-size: 40px;">{{ elecTime.minute2 }}</div>
                        <div class="flexajc" style="height:10%;background-color: rgb(100,100,100);font-size: 40px;" @click.stop="minute2Click(-1)">-</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
      </div>
</template>

<script>

export default {
data(){
    return {
        bigScreenShow:0,

        // 0正面 1右面 2后面 3左面 4上面
        wallIndex:0,
        lastWallIndex:0,

        thingsList:{
            outKey:{
                once:false,
                owing:false,
            },
            bag:{
                once:false,
                owing:false,
            },
            clothes:{
                once:false,
                owing:false,
            },
            light:{
                once:false,
                owing:false,
            },
            // 电灯功能是否启动
            lightFun:{
                once:false,
                owing:false,
            },
            banshou:{
                once:false,
                owing:false,
            },
            clock:{
                once:false,
                owing:false,
            },
            shoeCabinet:{
                once:false,
                owing:false,
            },
        },

        // 时间
        elecTime:{
            hour1:0,
            hour2:0,
            minute1:0,
            minute2:0,
        },

        tipMsg:'提示',
        tipShow:false,
        
        textMsg:'线索展示',
        textShow:false,
    }
},
methods:{
    // 鞋柜点击
    shoeCabinetClick(){
        
        if(this.textShow) {
            return
        }

        if(this.thingsList.shoeCabinet.once) {
            return
        }
        this.thingsList.shoeCabinet.once = true
        this.thingsList.shoeCabinet.owing = true
        this.tipShowFun('翻找了鞋柜')

    },
    // 闹钟点击
    clockClick(){
        if(!this.thingsList.clock.once){
             this.bigScreenShow = 1
        }
    },
    // hour1click 加
    addHour1Click(){
        this.elecTime.hour1 ++
        if(this.elecTime.hour1 == 2){
            if(this.elecTime.hour2 > 4) {
                this.elecTime.hour2 = 4
            }
            
        }else if(this.elecTime.hour1>2){
            this.elecTime.hour1 = 0           
        }

    },
// hour1click 减
lessHour1Click(){
    this.elecTime.hour1 --
    if(this.elecTime.hour1 < 0) {
        this.elecTime.hour1 = 2
        if(this.elecTime.hour2 > 4) {
            this.elecTime.hour2 = 4
        }
    }
},
// hour2click 加
addHour2Click(){
    this.elecTime.hour2 ++
    if(this.elecTime.hour1 == 2) {
        if(this.elecTime.hour2 >4) {
            this.elecTime.hour1 = 0
            this.elecTime.hour2 = 1
        } 
    }else {
        if(this.elecTime.hour2 > 9 ) {
            this.addHour1Click()
            this.elecTime.hour2 = 0
        }
    }
},
// hour2click 减
lessHour2Click(){
    this.elecTime.hour2 --
    if(this.elecTime.hour1 == 0) {
        if(this.elecTime.hour2 < 0) {
            this.elecTime.hour1 = 2
            this.elecTime.hour2 = 4
        }
    }else {
        if(this.elecTime.hour2 < 0) {
            this.elecTime.hour2 = 9
            this.lessHour1Click()
        }
    }
},

// minute1click 
minute1Click(val){
    this.elecTime.minute1 += val
   if(this.elecTime.minute1>6) {
        this.elecTime.minute1 = 0
   }else if(this.elecTime.minute1<0) {
        this.elecTime.minute1 = 6
   }
},

// minute2click
minute2Click(val) {
    this.elecTime.minute2 += val
    if(this.elecTime.minute2>9) {
        this.elecTime.minute2 = 0
    }else if(this.elecTime.minute2<0) {
        this.elecTime.minute2 = 9
    }
},

    // 电箱点击
    elecBoxClick(){
        if(this.textShow) {
            return
        }

        if(!this.thingsList.banshou.owing) {
            this.tipShowFun('需要扳手!')
            return
        }

        this.thingsList.lightFun.owing = true
        this.thingsList.lightFun.once = true
        this.tipShowFun('出现一丝丝电流声')

    },
    // 电灯开关点击 
    lightOpenClick(){
  if(this.textShow) {
            return
        }

        if(this.thingsList.lightFun) {
            this.thingsList.light.owing = !this.thingsList.light.owing
        }else {
            this.tipShowFun('貌似没有什么作用？')
        }
    },
    // 纸团线索展示
    showPaperText(){
  if(this.textShow) {
            return
        }

        this.textShowFun('20:32')
    },
    // 衣物点击
    clothesClick(){
  if(this.textShow) {
            return
        }

        if(this.thingsList.clothes.once) {
            this.tipShowFun('里边貌似没有东西了')
        }else {
            this.thingsList.clothes.once = true
            this.thingsList.clothes.owing = true
            this.tipShowFun('翻出了一团纸团！')
        }
    },
    // 包包点击
    bagClick(){
  if(this.textShow) {
            return
        }

        if(this.thingsList.bag.once) {
            this.tipShowFun('里边貌似没有东西了')
        }else {
            this.thingsList.bag.once = true
            this.thingsList.bag.owing = true
            this.tipShowFun('翻出了一把钥匙！')
        }
    },
    // 锁着的门提示
    lockedDoorClick(){
  if(this.textShow) {
            return
        }

        if(this.thingsList.outKey.owing) {
            this.tipShowFun('恭喜你！逃脱成功！')
        }else {
            this.tipShowFun('门好像是锁着的')
        }
    },
    // 门锁提示
    lockedDoorKeyClick(){
  if(this.textShow) {
            return
        }

        if(this.thingsList.outKey.owing) {
            this.tipShowFun('恭喜你！逃脱成功！')
        }else {
            this.tipShowFun('需要大门钥匙！')
        }
    },


    // 向左
    turnLeft(){
  if(this.textShow) {
            return
        }

        this.wallIndex--
        if(this.wallIndex <0) {
            this.wallIndex = 3
        }
    },
    // 向右
    turnRight(){
  if(this.textShow) {
            return
        }

        this.wallIndex++
        if(this.wallIndex>3) {
            this.wallIndex = 0
        }
    },
    // 向上
    turnTop(){
  if(this.textShow) {
            return
        }

        this.wallIndex = 4
    },
    // 向下
    turnDown(){
  if(this.textShow) {
            return
        }

        this.wallIndex = this.lastWallIndex
    },
    // 展示提示
    tipShowFun(str){
        
        this.tipShow = true
        this.tipMsg = str
        setTimeout(() => {
        this.tipShow = false
        this.tipMsg = ''
      }, 1000);
    },
    // 文本提示
    textShowFun(str){
        this.textShow = true
        this.textMsg = str
    },
    // 关闭文本提示
    textCloseFun(){
        this.textShow = false
        this.textMsg = ''
    },
    
},
mounted(){

},
watch:{
    wallIndex(newVal,oldVal){
        this.lastWallIndex = oldVal
    },
    elecTime:{
            handler(newVal,oldVal) {
                if(newVal.hour1 == 2&& newVal.hour2 == 0&&newVal.minute1 == 3&&newVal.minute2 == 2){
                    this.bigScreenShow = 0
                    setTimeout(()=>{
                        this.thingsList.clock.owing = true
                        this.thingsList.clock.once = true
                        this.tipShowFun('闹钟在一阵响后，掉出了一张纸条')
                    },200)
                }
            },
            deep:true
        }
}
}
</script>

<style lang="scss" scoped>
.text-close-btn {
    color:#000;
}

.text-close-btn:hover {
    color:#fff;
}

.flexajc {
    display: flex;
    align-items: center;
    justify-content: center;
}

.things-item {
    background-color: #ff9800;
}
.things-item:hover {
background-color: #febc5bf5;
}

.things-box {
    bottom: -50px;
}

.things-box:hover {
    bottom: 0px;
}

.redColor {
    background-color: red;
}
</style>